<template>
    <div>
        <h4>天气预报查询</h4>
        <div id="container"></div>
        <p id='forecast'></p>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "bfc4628de1efdb7a10d5a97be15d4cc1",
    };
    AMapLoader.load({
        key: "f8688af27c7f44f9904a27c6fa90a510", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                resizeEnable: true,
                center: [116.486409, 39.921489],
                zoom: 12
            });
            AMap.plugin('AMap.Weather', function() {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive('朝阳区', function(err, data) {
            if (!err) {
                var str = [];
                str.push('<h4 >实时天气' + '</h4><hr>');
                str.push('<p>城市/区：' + data.city + '</p>');
                str.push('<p>天气：' + data.weather + '</p>');
                str.push('<p>温度：' + data.temperature + '℃</p>');
                str.push('<p>风向：' + data.windDirection + '</p>');
                str.push('<p>风力：' + data.windPower + ' 级</p>');
                str.push('<p>空气湿度：' + data.humidity + '</p>');
                str.push('<p>发布时间：' + data.reportTime + '</p>');
                var marker = new AMap.Marker({map: map, position: map.getCenter()});
                var infoWin = new AMap.InfoWindow({
                    content: '<div class="info" style="position:inherit;margin-bottom:0;">'+str.join('')+'</div><div class="sharp"></div>',
                    isCustom:true,
                    offset: new AMap.Pixel(0, -37)
                });
                infoWin.open(map, marker.getPosition());
                marker.on('mouseover', function() {
                    infoWin.open(map, marker.getPosition());
                });
            }
        });
        //未来4天天气预报
        weather.getForecast('朝阳区', function(err, data) {
            if (err) {return;}
            var str = [];
            for (var i = 0,dayWeather; i < data.forecasts.length; i++) {
                dayWeather = data.forecasts[i];
                str.push(dayWeather.date+' <span class="weather">'+dayWeather.dayWeather+'</span> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
            }
            document.getElementById('forecast').innerHTML = str.join('<br>');
        });
    });
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<style lang="scss" scoped>
html,
body,
#container {
    height: 800px;
}

.weather {
    width: 5rem;
    display: inline-block;
    padding-left: 0.5rem;
}

.sharp {
    height: 1rem;
    width: 1rem;
    background-color: white;
    transform: rotateZ(45deg);
    box-shadow: 2px 2px 3px rgba(114, 124, 245, .5);
    position: inherit;
    margin-left: 10.5rem;
    margin-top: -6px;
}
</style>